<template>
    <div>
        <div class="main">
            <!--      基础控件      -->
            <el-card class="atom-panel">
                <template #header>
                    <div class="card-header">
                        <div class="text-icon">
                            <span>💡</span>
                        </div>
                        <span>基础控件</span>
                    </div>
                </template>
                <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs">
                    <el-tab-pane label="容器">
                    </el-tab-pane>
                    <el-tab-pane label="表单控件">
                        <draggable class="cardItem" :list="formType"
                            :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" item-key="name"
                            :clone="clone" @start="drag = true" @end="drag = false">
                            <template #item="{ element }">
                                <el-card class="dra-card" style="cursor: move; margin: 10px">
                                    <el-icon :size="14">
                                        <component :is="element.icon" />
                                    </el-icon>
                                    {{ element.title }}
                                </el-card>
                            </template>
                        </draggable>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
            <!--      表单区域      -->
            <el-card class="form-panel">
                <template #header>
                    <div class="card-header">
                        <div class="text-icon">
                            <span>📑</span>
                        </div>
                        <span>表单区域</span>
                    </div>
                </template>
                <div v-show="form.length === 0" class="tip" style="text-align: center; margin-top: 10px">
                    👈 请在左侧选择控件并拖至此处
                </div>
                <draggable v-model="form" tag="el-row" :animation="340" item-key="field" group="people"
                    scroll-sensitivity="100" @start="(drag = true), (choose = '0')" @end="drag = false">
                    <template #item="{ element, index }">
                        <ElComponents :element="element" :active-id="choose" :copy="copy" :delete="del" :form="form"
                            :choose="chooseComponent" @click.stop="chooseComponent(element)"></ElComponents>
                    </template>
                </draggable>
            </el-card>
            <!--      编辑控件      -->
            <el-card class="setting-panel">
                <template #header>
                    <div class="card-header">
                        <div class="text-icon">
                            <span>⚙️</span>
                        </div>
                        <span>编辑控件</span>
                    </div>
                </template>
                <div v-if="choose !== '0'">
                    <el-card class="dra-card cardItem" :body-style="{ height: '60vh' }" style="margin: 10px">
                        <div>
                            <el-icon :size="16">
                                <component :is="activeData.icon" />
                            </el-icon>
                            {{ activeData.title }}
                        </div>
                        <div style="margin-top: 10px">
                            <atom-config :obj="activeData"></atom-config>
                        </div>
                    </el-card>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { TabsInstance } from 'element-plus'
import draggable from "vuedraggable";
import formType from "../config/formsDict";

import ElComponents from "../components/home/atom/elComponents.jsx";
import atomConfig from "../components/home/atomConfig.vue";
const form = ref([]);
const activeData = ref<{title: string, field: string, icon: string}>({});
const choose = ref<string>("0");
const drag = ref(<boolean>false);
const tabPosition = ref<TabsInstance['tabPosition']>('left')
// 选中组件
const chooseComponent = (element: any) => {
    console.log(element);
    activeData.value = element;
    choose.value = element.field;
}

// 获取随机ticks作为id
const getId = () => {
    return (
        (
            Math.floor(Math.random() * (99999 - 10000)) + 10000
        ).toString() + new Date().getTime().toString().substring(5)
    );
}

// 删除组件
const del = (list: Array<[{field: string}]>, id: string) => {
    let delIdx = list.findIndex((i) => i.field === id);
    if (delIdx >= 0) list.splice(delIdx, 1);
    if (choose.value === id) {
        activeData.value = {};
        choose.value = "0";
    }
    if (!form.value.length) {
        activeData.value = {};
        choose.value = "0";
    }
}

// 复制组件
const copy = (list: Array<[]>, node: any) => {
    let copIndex = list.findIndex((i) => i.field === node.field);
    list.splice(copIndex + 1, 0, clone(node));
}

// 克隆组件
const clone = (obj: Object) => {
    let cloneCp = reactive(JSON.parse(JSON.stringify(obj)));
    cloneCp.field = getId();
    return cloneCp;
}
</script>
<style lang="scss" scoped>
.cardItem {
    position: relative;
    animation: cardIn 1s;
    -webkit-animation: cardIn 1s;
    /* Safari and Chrome */
}

@keyframes cardIn {
    0% {
        top: -10px;
    }

    100% {
        top: 0;
    }
}

.formCard {
    min-width: 630px;
    margin: 10px;
    cursor: pointer;
}

.main {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 20px);
    height: calc(100% - 40px);
    display: flex;

    .card-header {
        text-align: center;

        .text-icon {
            &:hover {
                -webkit-animation: spin 1s linear 1s 5 alternate;
                animation: spin 1s linear infinite;
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    }

    .atom-panel {
        min-width: 300px;
        height: 100%;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .form-panel {
        width: calc(100% - 620px);
        // width: 600px;
        // min-width: 650px;
        height: calc(100% - 30px);
        margin: 0 10px;
        padding-bottom: 30px;
    }

    .setting-panel {
        min-width: 300px;
        height: 100%;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

:deep(.el-button + .el-button) {
    margin-left: 6px;
}

:deep(.el-card__body) {
    height: calc(100% - 90px);
    overflow-y: auto;
}

:deep(.el-card__body)::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
  overflow: auto;
}
</style>
